<template>
	<view class="container">
		<TopBtn :title="'在线续方'"></TopBtn>
		<view class="nav">
			<view :class="{'act':request.status==1}" @click="navChange(1)">
				待开方
			</view>
			<view :class="{'act':request.status==4}" @click="navChange(4)">
				拒绝开方
			</view>
			<view :class="{'act':request.status==3}" @click="navChange(3)">
				已开方
			</view>
		</view>
		<view class="listBox">
			<view class="list flex-sp-center" v-for="n in list" :key="n.id" @click="goinfo(n.id)">
				<image :src="n.patientAvatar" mode=""></image>
				<view class="nameBox">
					<view class=" name flex-sp-center">
						<view class="flex-sp-center">
							{{n.patientName}}
							<view class="info">{{n.sex==1?'男':'女'}} | {{n.age}}岁</view>
						</view>
					</view>
					<view class="text flex-center">
						<text class="ms">[病情描述]</text> <text class="bqms" v-if="n.diseaseDescribe">{{n.diseaseDescribe}}</text><text
							v-else>
							暂未填写</text>
					</view>
					<view class="time flex-sp-center">
						<uni-dateformat :date="n.createTime" format="yyyy-MM-dd hh:mm"></uni-dateformat>
						<view class="flex-center">
							查看详情 <uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOnlinePreFormPage,
		getTodayAppoint,
		getPublicOutpatientInfoPage,
		getTodayOutpatientInfoPage
	} from '@/api/ConsultationRoom'
	export default {
		data() {
			return {
				list: [],
				request: {
					pageNo: 1,
					pageSize: 10,
					status: 1,
				},
				maxNum: "",
				type: "",
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
			this.getOnlinePreFormPage()
		},
		onReachBottom() {
			if (this.maxNum <= this.request.pageNo) return
			this.request.pageNo = this.request.pageNo + 1
			this.getOnlinePreFormPage()
		},
		methods: {

			navChange(e) {
				this.request.status = e
				this.request.pageNo = 1
				this.list = []
				this.getOnlinePreFormPage()
			},
			getOnlinePreFormPage() {
				getOnlinePreFormPage(this.request).then(res => {
					this.list.push(...res.data.list)
					let num = res.data.total / this.request.pageSize
					if (num.toString().includes('.')) {
						num = Math.ceil(num)
					}
					this.maxNum = num
				})
			},
			goinfo(id) {
				if (id) {
					uni.navigateTo({
						url: `/pages/ContinuedPrescription/details/details?id=${id}`,
					})
				}
			},
		}
	}
</script>

<style lang="less" scopde>
	.flex-sp-center {
		display: flex;
		align-items: center;
	}

	.container {
		.listBox {
			margin-top: 30rpx;
			padding: 0 30rpx;

			.list {
				padding: 37rpx 20rpx 20rpx;
				box-sizing: border-box;
				width: 690rpx;
				min-height: 164rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 25rpx;


				image {
					width: 90rpx;
					height: 90rpx;
					margin-right: 23rpx;
				}

				.nameBox {
					flex: 1;

					.text {
						font-weight: 500;
						font-size: 26rpx;
						color: #333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: 8rpx;
						margin-bottom: 15rpx;

						.ms {
							margin-right: 10rpx;
							color: #999;
						}

						.bqms {
							display: inline-block;
							width: 500rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.name {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						justify-content: space-between;
					}

					.info {
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						margin: 0 17rpx;
					}



					.time {
						font-size: 22rpx;
						color: #999999;
						font-weight: 500;
					}


				}
			}
		}

		.nav {
			background-color: #fff;
			font-size: 32rpx;
			color: rgba(51, 51, 51, 0.5);
			line-height: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60rpx;

			view {
				flex: 1;
				text-align: center;
			}

			.act {
				color: #333333;
				font-weight: bold;
			}
		}

		.type {
			margin-top: 18rpx;
			display: flex;
			justify-content: space-around;
			color: #333333;
			font-size: 28rpx;
			text-align: center;

			image {
				width: 139rpx;
				height: 108rpx;
			}

		}
	}
</style>